<template>
    <div class="xunjingwendao">
        <Navbar :activeMenu="currentPath" />
        <div class="main container">
            <div class="layer-box">
                <!-- 商品列表 -->
                <div class="goods-list">
                    <div class="tis" v-if="insideCarGoods.length == 0">
                        <el-empty description="购物车暂无商品"></el-empty>
                    </div>
                    <div class="row" v-for="(item, index) in insideCarGoods" :key="index">
                        <!-- 滑动删除按钮 -->

                        <!-- 商品 -->
                        <div class="carrier">
                            <!-- checkbox -->
                            <div class="checkbox-box" @click="selectedTap(item)">
                                <div class="checkbox">
                                    <div :class="[item.selected ? 'on' : '']"></div>
                                </div>
                            </div>
                            <!-- 商品信息 -->
                            <div class="goods-info">
                                <img class="tp_img" :src="item.picUrl" />
                                <div class="info">
                                    <div class="cart_title">
                                        <div class="cart_title-text">{{ item.spuName }}</div>
                                        <div class="price-number">
                                            <div class="price">￥{{ item.addPrice }}</div>

                                        </div>
                                    </div>

                                </div>
                                <i class="el-icon-delete" @click="deleteGoods(item.id)" style="font-size: 28px;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部购物车 -->
            <div class="m-footer-car" v-if="selectedList.length > 0">
                <div class="allSelect_box" @click="allSelectTap">
                    <div class="checkbox">
                        <div :class="[isAllselected ? 'on' : '']"></div>
                    </div>
                    <div class="text">全选</div>

                </div>


                <div class="settlement">
                    <div class="footer_sum">合计:<div class="footer_price">￥{{ sumPrice }}</div>
                    </div>
                    <div class="footer_but" @click="toConfirmation">结算({{ selectedList.length }})</div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { lessoncart, lessoncartUpdate, lessoncartDel } from "@/api/index"
export default {
    computed: {
        currentPath() {
            return '/lesson'; // 获取当前路由路径
        },
    },
    data() {
        return {
            carNum: 0, //加入到购物车的总个数
            carPrice: "0.00", //加入到购物车的总价钱
            // 加入到购物车的商品列表
            insideCarGoods: [],
            sumPrice: 0.00,
            showHeader: true,
            selectedList: [],
            isAllselected: false,
            //控制滑动效果
            theIndex: null,
            oldIndex: null,
            isStop: false
        }
    },
    mounted(event) {
        this.getCartList()
        this.checked = false;
    },

    methods: {
        lessoncartDelData(data) {
            lessoncartDel(data).then((res) => {
                if (res.code == 200) {
                    this.$message.success(res.msg)
                    lessoncart({ pageNum: 1, pageSize: 1000 }).then((res) => {
                        this.insideCarGoods = res.data.records;

                    })

                }
            })
        },
        lessoncartUpdateFn(data) {
            lessoncartUpdate(data).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    lessoncart({ pageNum: 1, pageSize: 1000 }).then((res) => {
                        console.log(res, 'gouwuchelist')

                        this.insideCarGoods = res.data.records;
                        this.sumFun();
                    })
                } else {
                    this.$message.success(res.msg)
                }
            })
        },
        getCartList() {
            lessoncart({ pageNum: 1, pageSize: 1000 }).then((res) => {
                console.log(res, 'gouwuchelist')
                if (res.code != 200) {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    })
                    return;
                }
                res.data.records.forEach((v) => {
                    v.selected = false;
                })
                this.insideCarGoods = res.data.records;
            })
        },
        //控制左滑删除效果-begin
        touchStart(index, event) {
            console.log(index, event)
            //多点触控不触发
            if (event.touches.length > 1) {
                this.isStop = true;
                return;
            }
            this.oldIndex = this.theIndex;
            this.theIndex = null;
            //初始坐标
            this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
        },
        touchMove(index, event) {
            console.log(index, event)
            //多点触控不触发
            if (event.touches.length > 1) {
                this.isStop = true;
                return;
            }
            let moveX = event.touches[0].pageX - this.initXY[0];
            let moveY = event.touches[0].pageY - this.initXY[1];

            if (this.isStop || Math.abs(moveX) < 5) {
                return;
            }
            if (Math.abs(moveY) > Math.abs(moveX)) {
                // 竖向滑动-不触发左滑效果
                this.isStop = true;
                return;
            }

            if (moveX < 0) {
                this.theIndex = index;
                this.isStop = true;
            } else if (moveX > 0) {
                if (this.theIndex != null && this.oldIndex == this.theIndex) {
                    this.oldIndex = index;
                    this.theIndex = null;
                    this.isStop = true;
                    setTimeout(() => {
                        this.oldIndex = null;
                    }, 150)
                }
            }
        },
        touchEnd(index, $event) {
            //结束禁止触发效果
            this.isStop = false;
        },
        //删除商品
        async deleteGoods(id) {
            let arr = [id];

            await this.lessoncartDelData(arr)

            const index = this.selectedList.findIndex(selectedItem => selectedItem.id === id);
            if (index !== -1) {
                this.selectedList.splice(index, 1);

            }
            this.sumFun();
            this.oldIndex = null;
            this.theIndex = null;
        },
        // 删除商品 底部
        async deleteList() {
            console.log(this.selectedList)
            let ids = []
            this.selectedList.forEach((res) => {
                ids.push(res.id)
            })
            await this.lessoncartDelData(ids)
            this.isAllselected = this.selectedList.length == this.insideCarGoods.length && this.insideCarGoods.length > 0;
            for (let i = 0; i < ids.length; i++) {
                const index = this.selectedList.findIndex(selectedItem => selectedItem.id === ids[i]);
                if (index !== -1) {
                    this.selectedList.splice(index, 1);
                }
            }
            this.sumPrice = 0;
            this.carNum = 0;

        },
        // 选中商品
        selectedTap(item) {
            // 切换商品的选中状态
            item.selected = !item.selected;
            if (item.selected) {
                this.selectedList.push(item);
            } else {
                const index = this.selectedList.findIndex(selectedItem => selectedItem.id === item.id);
                if (index !== -1) {
                    this.selectedList.splice(index, 1);
                }
            }
            this.sumFun();
        },
        //全选
        allSelectTap() {
            let arr = [];
            this.insideCarGoods.forEach(item => {
                item.selected = this.isAllselected ? false : true;
                arr.push(item);
            })
            this.selectedList = this.isAllselected ? [] : arr;
            this.isAllselected = this.isAllselected || this.insideCarGoods.length == 0 ? false : true;
            this.sumFun();
        },

        // 合计
        sumFun() {
            this.sumPrice = 0;
            let sum = 0;

            this.selectedList.forEach(item => {
                sum += item.addPrice;
            })
            this.sumPrice = parseFloat(sum).toFixed(2);

        },

        //清空购物车
        clearCar() {
            this.insideCarGoods = [],
                this.carPrice = "0.00";
        },

        // 全选
        checkedAll() {
            this.checked = !this.checked;
            let flag = this.checked,
                items = this.cartList;
            items.forEach(val => {
                if (flag) {
                    val.check = true;
                } else {
                    val.check = false;
                }
            });
        },


        //跳转确认订单页面
        toConfirmation() {
            if (this.selectedList.length < 1) {
                this.$message.warning('请选择商品')
                return;
            }
            this.$router.push({
                path: "/payOrder",
                query: {
                    type: "cart",
                    goodsData: JSON.stringify(this.selectedList),
                    sumPrice: this.sumPrice
                }
            })
            // uni.navigateTo({
            // 	url:"/pages/lesson/orderDetails?type=cart&goodsData="+JSON.stringify(this.selectedList)+'&sumPrice='+this.sumPrice
            // })
            console.log(this.selectedList)
        },
    }
}
</script>

<style lang="scss" scoped>
.layer-box {
    width: 100%;
    padding: 0;
    height: 70%;
    border-radius: 20px 20px 0 0;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

.checkbox-box {
    display: flex;
    align-items: center;
}

.checkbox {
    width: 23px;
    height: 23px;
    border-radius: 100%;
    border: solid 2px #f06c7a;
    display: flex;
    justify-content: center;
    align-items: center;

    .on {
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background-color: #f06c7a;
    }
}

.text {
    font-size: 16px;
    margin-left: 10px;
}

.status {
    width: 100%;
    height: 0;
    position: fixed;
    z-index: 10;
    background-color: #fff;
    top: 0;
    /*  #ifdef  APP-PLUS  */
    height: var(--status-bar-height); //覆盖样式
    /*  #endif  */
}

.header {
    width: 92%;
    padding: 0 4%;
    height: 100px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 10;
    background-color: #fff;
    /*  #ifdef  APP-PLUS  */
    top: var(--status-bar-height);
    /*  #endif  */
}

.header .cart_title {
    font-size: 14px;
}

.place {
    background-color: #ffffff;
    height: 100px;
    /*  #ifdef  APP-PLUS  */
    margin-top: var(--status-bar-height);
    /*  #endif  */
}

.goods-list {
    width: 100%;
    margin-top: 10px;
    height: 600px;
    overflow: auto;
}

.tis {
    width: 100%;

}

.row {
    width: 92%;
    height: 150px;
    margin: 20px auto;
    border-radius: 15px;
    border-bottom: 1px solid #f1eeee;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    z-index: 4;
    border: 0;
}

.menu {
    .icon {
        color: #fff;
    }

    position: absolute;
    width: 30%;
    height: 100%;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    color: #fff;
    z-index: 2;
}

.icon_dele {
    width: 60px;
    height: 60px;
}

.carrier {
    @keyframes showMenu {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-30%);
        }
    }

    @keyframes closeMenu {
        0% {
            transform: translateX(-30%);
        }

        100% {
            transform: translateX(0);
        }
    }

    &.open {
        animation: showMenu 0.25s linear both;
    }

    &.close {
        animation: closeMenu 0.15s linear both;
    }

    background-color: #fff;

    .checkbox-box {
        padding-left: 20px;
        flex-shrink: 0;

        margin-right: 20px;
    }

    position: absolute;
    width: 100%;
    padding: 0 0;
    height: 100%;
    z-index: 3;
    display: flex;
    align-items: center;

    .goods-info {
        width: 100%;
        display: flex;
        padding-right: 20px;
        align-items: center;

        .tp_img {
            width: 210px;
            height: 120px;
            border: 1px dashed #b2b2b2;
        }

    }
}

.info {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-left: 20px;

    .cart_title {
        width: 100%;
        align-items: center;
        display: flex;

        .cart_title-text {
            font-size: 14px;
            width: 180px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

    }

    .price-number {



        font-size: 17px;
        color: red;

        .price {}

        .number {
            display: flex;
            justify-content: center;
            align-items: flex-end;

            .input {
                width: 60px;
                height: 60px;
                margin: 0 10px;
                background-color: #f3f3f3;

                input {
                    width: 60px;
                    height: 60px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    font-size: 26px;
                }
            }

            .sub,
            .add {
                width: 45px;
                height: 45px;
                background-color: #f3f3f3;
                border-radius: 5px;

                .icon {
                    font-size: 22px;
                    width: 45px;
                    height: 45px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                }

            }

            .icon_jian {
                width: 30px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 8px 8px;
            }

        }
    }
}

.delBtn {
    border: solid 1px #f06c7a;
    color: #f06c7a;
    padding: 0 20px;
    height: 50px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    margin-top: 5px;
}

// 底部
.allSelect_box {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.m-footer-car {
    position: fixed;
    bottom: 0px;
    width: 80%;
    height: 99px;
    border-top: solid 1px #eee;
    background-color: #fff;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settlement {

    .footer_sum {
        justify-content: center;
        margin: 10px;
        font-size: 16px;
        margin-right: 10px;
        display: flex;

        .footer_price {
            font-weight: bold;
            font-size: 20px;
            color: #ff0000;
        }
    }
}

.footer_but {
    background-color: #ff5000;
    color: #fff;
    height: 38px;
    line-height: 38px;
    padding: 0 40px;
    border-radius: 8px;

}
</style>